<template>
  <div id="blog">
    <div class="blogDiv">
      <template>
        <!-- 表格开始 -->
        <el-table :data="tableData" style="width: 100%">
          <!-- 博客标题开始 -->
          <el-table-column
            type="index"
            width="50"
            :index="indexMethod"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="blog_title" label="博客标题" width="180">
          </el-table-column>
          <!-- 博客标题结束 -->
          <el-table-column
            prop="comments_count"
            label="评论数量"
            align="center"
          >
            <template slot-scope="scope">
              <svg-icon
                icon-class="comment"
                style="margin-right: 10px; font-size: 20px"
              />{{ scope.row.comments_count }}
            </template>
          </el-table-column>
          <el-table-column prop="browse_count" label="浏览数量" align="center">
            <template slot-scope="scope">
              <svg-icon
                icon-class="browse"
                style="margin-right: 10px; font-size: 20px"
              />{{ scope.row.browse_count }}
            </template>
          </el-table-column>
          <el-table-column
            prop="blog_create"
            label="博客创建时间"
            align="center"
            width="120px"
          >
            <template slot-scope="scope">
              <svg-icon icon-class="time" style="margin-right: 10px" />{{
                scope.row.blog_create
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="blog_update"
            label="博客更新时间"
            align="center"
            width="120px"
          >
            <template slot-scope="scope">
              <svg-icon icon-class="time" style="margin-right: 10px" />{{
                scope.row.blog_update
              }}
            </template>
          </el-table-column>
          <el-table-column prop="is_top" label="是否置顶" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.is_top == '1'">
                <svg-icon icon-class="top" style="font-size: 30px" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="is_look" label="是否可见" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.is_look == '1'">
                <svg-icon icon-class="show" style="font-size: 30px" />
              </div>
              <div v-if="scope.row.is_look == '0'">
                <svg-icon icon-class="hide" style="font-size: 20px" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            fixed="right"
            width="200px"
          >
            <template slot-scope="scope">
              <el-row>
                <el-button
                  type="success"
                  icon="el-icon-s-platform"
                  circle
                  @click="showContent(scope.row)"
                ></el-button>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                ></el-button>

                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                ></el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="pageNums"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <el-dialog :title="currBlog.blog_title" :visible.sync="dialogVisible">
      <div id="blogContent" v-html="blogContent"></div>
    </el-dialog>
  </div>
</template>

<script>
// 引入我们刚刚写的请求方法 selectAllBlog
import "highlight.js/styles/idea.css";
var hljs = require("highlight.js");
var md = require("markdown-it")({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return (
          '<pre class="hljs"><code>' +
          hljs.highlight(lang, str, true).value +
          "</code></pre>"
        );
      } catch (__) {}
    }
    return (
      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + "</code></pre>"
    );
  },
});
import { selectAllBlog } from "@/api/blog";
export default {
  name: "Blog",
  data() {
    return {
      tableData: [],
      currPage: 1,
      pageSize: 8,
      pageNums: 10,
      dialogVisible: false,
      currBlog: {},
      blogContent: "",
    };
  },
  methods: {
    loadData() {
      selectAllBlog(this.currPage, this.pageSize)
        // 成功请求
        .then((response) => {
          this.tableData = response.pageData;
          this.pageNums = response.pageNums * 10;
        })
        // 失败请求
        .catch((error) => {
          console.log(error);
        });
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.loadData();
    },
    indexMethod(index) {
      return index + (this.currPage - 1) * this.pageSize + 1;
    },
    showContent(blog) {
      this.currBlog = blog;
      this.blogContent = md.render(blog.blog_content);
      this.dialogVisible = true;
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped>
.page {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
#blogContent {
  max-height: 500px;
  overflow: auto;
}
</style>
